<template>
  <div>
    <div class="flex justify-between">
      <div>
        <el-descriptions ref="ruleFormRef" :column="1" direction="horizontal">
          <el-descriptions-item width="50%" label="最近上报时间">
            2024-11-22 12:23:34
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <div>
        <el-button type="primary" plain size="small" v-for="(item, index) in deviceinfo?.commandInfo" :key="index"
          @click="commanddevice(item)">{{ isNullOrEmpty( item.commandName ) }}</el-button>
      </div> -->
    </div>
    <div class="grid grid-cols-5 gap-[16px]">
      <div class="h-[100px] flex justify-center flex-col items-center bg-[#F6F7FB] dark:bg-[#2E3349]"
        v-for="(item, index) in deviceinfo?.structInfo" :key="index">
        <div>
          <div class="text-[22px] leading-[22px] font-bold font-[D-DIN] text-center dark:text-[#FFFFFF]">
            {{ isNullOrEmpty( `${realTimeData[item?.fieldAlias] ?? '--'} ` ) }}
          </div>
          <div class="pt-[12px] text-[14px] leading-[14px] text-center dark:text-[#D6D6D6]">
            {{ isNullOrEmpty( `${item.fieldName} (${item?.unit})` ) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ElMessage, ElMessageBox } from "element-plus";
import dataselect from "./dataselect.vue"
import { addDialog } from "@/components/ReDialog";
import { postCommand, getRealTimeData } from "@/api/screen/index"
const props = defineProps({
  deviceId: {
    type: String,
    default: null
  },
  deviceinfo: {
    type: Object,
    default: () => ({})
  }
});
const formRef = ref(null)
const selectidvalue = ref(null)
const realTimeData = ref({})
const timer = ref(null)
onMounted(() => {
  getRealTimeData({ deviceId: props.deviceId }).then((res) => {
    realTimeData.value = res.result.data
  })
  timer.value = setInterval(() => {
    getRealTimeData({ deviceId: props.deviceId }).then((res) => {
      realTimeData.value = res.result.data
    })
  }, 3000)
});
onBeforeUnmount(() => {
  timer.value && clearInterval(timer.value)
});
const commanddevice = (item: any) => {
  selectidvalue.value = null
  if (item.paramType == 1) {
    ElMessageBox.confirm(
      `确定要执行${item.commandName}命令吗?`,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      postCommand({
        deviceId: props.deviceId,
        commandId: item.commandId
      }).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg
          })
        }
      })
    })
  } else if (item.paramType == 2) {
    ElMessageBox.prompt(`请输入参数`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      inputPlaceholder: `请输入${item.value2[0]}-${item.value2[1]}`,
      inputPattern: /^[1-9]\d*$/,
      inputErrorMessage: `请输入${item.value2[0]}-${item.value2[1]}`
    }).then(({ value }) => {
      postCommand({
        deviceId: props.deviceId,
        commandId: item.commandId,
        commandArg: value
      }).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg
          })
        }
      })
    })
  } else {
    addDialog({
      title: `提示`,
      width: "428px",
      draggable: true,
      fullscreenIcon: true,
      props: {
        options: item.value3,
        modelValue: null
      },
      hideFooter: false,
      closeOnClickModal: false,
      contentRenderer: () => h(dataselect, {
        ref: formRef,
        'onUpdate:modelValue': (val) => {
          selectidvalue.value = val
        }

      }),
      openAutoFocus({ options, index }) {
        options.props = {
          isLoading: true,
          modelValue: null,
          options: item.value3
        };
      },
      beforeSure: (done, { options }) => {
        if (selectidvalue.value == null) {
          ElMessage({
            type: 'warning',
            message: '请选择'
          })
          return
        }
        postCommand({
          deviceId: props.deviceId,
          commandId: item.commandId,
          commandArg: selectidvalue.value
        }).then((res: any) => {
          if (res.code == 200) {
            done()
            ElMessage({
              type: 'success',
              message: res.msg
            })
          }
        })
      }
    });
  }

}
</script>
